<style scoped lang="less">
	.demonstration{
		margin-right:15px;
		margin-left:15px;
	}
	.vipmassge{
		margin-right:15px ;
	}
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	
	h3{
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}
	.item1,.item2{
		display: flex;
		flex-wrap: wrap;
	}
	.el-table{
		width: 100vh;
		.cell{
			.el-button{
				color: #4b5db9;
			}
		}
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.tableclass{
		display: flex;
		margin-top: 10px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: 700;
		p{
			margin-right: 20px;
		}
	}
	.el-table .cell{
		text-align: center !important;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <div v-if="flag">
			 <h3>
			 	商家地址库
				<el-button plain type="primary" @click="addAddress">添加商家地址库</el-button>
			</h3>
			<div class="item1">
				<el-form-item label="联系方式" label-width="90">
					<el-input
						placeholder="请输入联系方式"
						v-model="phonenumber"
					>	
					</el-input>
				</el-form-item>
				<el-form-item label="地址" label-width="70">
					<el-input
						placeholder="请输入地址"
						v-model="addressvalue"
					>	
					</el-input>
				</el-form-item>
				
			 	<el-button
			 	type="primary"
				@click="searchaddress"
			 	>搜索</el-button>
			 	<el-button
			 	type="plain"
				@click="replay"
			 	>重置</el-button>
			</div>
			<el-table :data="tableData" style="width: 100%" height="53vh">
			    <el-table-column prop="" label="联系人" width="150">
					<template #default="{ row }">
					{{row.userName}}
					</template>
				</el-table-column>
				<el-table-column label="联系方式">
					<template #default="{ row }">
						{{row.addressTel}}
					</template>
				</el-table-column>
				<el-table-column label="地址">
					<template #default="{ row }">
						<p style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{row.addressProvince}}{{row.addressCity}}{{row.addressArea}}:{{row.addressDetails}}</p>
					</template>
				</el-table-column>
				<el-table-column label="地址类型">
					<template #default="{ row }">
						{{row.addressType}}
					</template>
				</el-table-column>
				
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button link  @click="goupstoreaddress(row)">编辑</el-button>
						<el-button link  @click="deladdress(row.addressId)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
				<el-dialog
				   v-model="dialogVisibledelate"
				   title="提示"
				   width="500"
				 >
				 <div style="text-align: center;"><span>确定要删除该地址吗？</span></div>
				   <template #footer>
				     <div class="dialog-footer">
				       <el-button @click="dialogVisibledelate = false">取消</el-button>
				       <el-button type="primary" @click="define">
				         确定
				       </el-button>
				     </div>
				   </template>
				</el-dialog>
			</div>
			
			<Addaddress v-else @retronParent = "addstoreaddress"></Addaddress>
		 </el-main>
	   </el-container>
	 </div>
</template>
<script setup>
import Header from '@/components/Header.vue'
import Addaddress from './Addaddress.vue'
// import AddMenu from './AddMenu.vue';
import { ref,reactive,onMounted} from 'vue'
import {Search,Lock,Calendar} from '@element-plus/icons-vue'
import {
		getaddress,
		delstoreaddress,
	} from "@/api";
import { ElMessage, ElMessageBox } from 'element-plus';
let pageIndex=ref(1);
let pageSize=4;
let total=ref(0)
let tableData = ref([])
const addressvalue=ref()
const phonenumber=ref()
const flag=ref(true)
//获取商家地址库列表
const getaddresslist = async () => {
	let res = await getaddress({
		pageIndex: pageIndex.value,
		pageSize: pageSize,
	})
		tableData.value = res.AdressList;
		// console.log("wdwad",tableData.value);
		let table01=tableData.value
		table01.forEach(x=>{

			if(x.addressType==1){
				x.addressType="收货地址"
			}else{
				x.addressType="发货地址"
			}
		})
		tableData.value=table01;
		//console.log('1111',table01)
		total.value = res.pageCount;
		// console.log(res)
	}
//搜索地址列表
const searchaddress = async () => {
	let res = await getaddress({	
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		addressTel: phonenumber.value,
		addressDetails: addressvalue.value
	})
		tableData.value = res.AdressList;
		total.value = res.pageCount;
		// console.log(res)
	}
//添加商家地址库
const addstoreaddress=()=>{
	flag.value=true;
	getaddresslist()
}

// 添加地址库
const addAddress=()=>{
	flag.value=false
	sessionStorage.removeItem("addressId")
	sessionStorage.removeItem("row")
}

//编辑商家地址
const goupstoreaddress=(row)=>{
	sessionStorage.setItem("addressId",row.addressId)
	sessionStorage.setItem("row",JSON.stringify(row))
	flag.value=false;
}
//删除地址库
const dialogVisibledelate=ref(false)

const deladdress = async (addressid) => {
	dialogVisibledelate.value=true
	sessionStorage.setItem("addressId",addressid)
}
//删除确定	
const define= async()=>{
	let res = await delstoreaddress({
		addressId:Number(sessionStorage.getItem("addressId"))
	})
		// console.log(res)
		ElMessage({
		    message:"删除成功",
		    type: 'success',
		})
		getaddresslist()
		dialogVisibledelate.value=false
}
	
const replay=()=>{
		phonenumber.value=''
		addressvalue.value=''
		getaddresslist()
	}

onMounted(() => {
	getaddresslist()
	sessionStorage.removeItem("addressId")
	sessionStorage.removeItem("row")
})

//获取分页
const changePage=(page)=>{
	pageIndex.value=page;
	getaddresslist()
}

</script>
